<script setup>

import {CirclePlus, Search, User} from "@element-plus/icons-vue";
import {ref} from "vue";
import InsertClass from "./CourseClassOperation/InsertClass.vue";
import InsertStudent from "./CourseClassOperation/InsertStudent.vue";

import {defineProps} from "vue"
import {listCourseClass} from "../../api/course/course.js";
const prop = defineProps(['courseId'])
// const ClassName = ref('');

const activeIndex = ref('/course/classmanage/classtable')
const isInsertClass=ref(false);


const classTable=ref();

// 新增班级按钮
const handleInsertClass = () => {
  isInsertClass.value=true;
}

// 查询分班列表
const handleListClassTable=async ()=>{
  await listCourseClass(prop.courseId).then(res=>{
    classTable.value = res.data;
    console.log(classTable.value);
  })
}
// 关闭弹窗函数
const closeDialog = () => {
  isInsertClass.value = false;
};
handleListClassTable();

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="margin-top: 20px;height: 14vh">
        <div>
          <div>
            <el-icon style="width: 100px;">
              <div style="display: flex;align-items: center;">
                <User/>
                <span>成员管理</span>
              </div>
            </el-icon>
            <el-divider direction="vertical" style="background: black"/>
            <span>学生</span>
          </div>
<!--          <div style="float: right">-->
<!--            <el-icon style="width: 100px;"-->
<!--                     @mouseover="isHovered=true"-->
<!--                     @mouseleave="isHovered=false"-->
<!--                     @click="isInsertStudent=true"-->
<!--                     :class="{ 'hovered': isHovered }">-->
<!--              <div style="display: flex;align-items: center;">-->
<!--                <CirclePlus/>-->
<!--                <span>添加学生</span>-->
<!--              </div>-->
<!--            </el-icon>-->
<!--          </div>-->
        </div>
        <el-menu
            :default-active="activeIndex"
            mode="horizontal"
            :ellipsis="false"
            :router="true"
            style="margin-top: 40px"
        >
          <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
            <div style="display: flex; align-items: center;">
              <el-menu-item index="/course/classmanage/classtable">分班列表</el-menu-item>
              <el-menu-item index="/course/classmanage/studenttable">学生列表</el-menu-item>
            </div>
            <el-button type="primary" style="border-radius: 14px;" @click="handleInsertClass">新建分班</el-button>
          </div>
        </el-menu>
      </el-header>
      <el-main style="height: 60vh">
        <router-view :courseId="prop.courseId"/>
      </el-main>
      <InsertClass v-model="isInsertClass" :courseId="courseId" @close="closeDialog" @list="handleListClassTable"></InsertClass>
    </el-container>
  </div>
</template>

<style scoped lang="less">
.hovered {
  color: #41a4f6; /* 悬停时的颜色，可以根据需要调整 */
}
</style>